
<template>
  <div>
    <ul>
      <li v-for="(item,index) in list"
          class="block"
          :key="item.id">

        <div @click="changeStatus(index,item)"
             @mousemove="mousemove(item)"
             @mouseleave="mouseleave"
             :class="['danyuan',{'st1':curItem.id==item.id && curItem.children},{'st2':curItem.id==item.id && !curItem.children}]"
             :style="{paddingLeft:item.leve*20+'px'}">
          <draggable dragClass="chosen"
                     :sort="false"
                     @start="start"
                     @end="end"
                     filter=".first">
            <div :class="['span',{'first':item.id=='1'}]">{{item.text}} </div>
          </draggable>
          <i :class="['rig','el-icon-arrow-up']"
             v-if="item.children " />
        </div>
        <treemenu v-if="item.children  && scopesDefault[index]"
                  :list="item.children"></treemenu>
      </li>
    </ul>
  </div>
</template>
<script>
import draggable from 'vuedraggable';
import Bus from '@/utils/bus.js';
export default {
  components: {
    draggable
  },
  props: {
    list: {
      type: Array,
      default: []
    }
  },
  name: "treemenu",
  data() {
    return {
      curItem: {},
      curItem2: {},
      scopesDefault: [],
      scopes: []
    }
  },
  created() {
    this.scope();
  },
  methods: {
    searchVal(val) {
      this.$set(this.scopesDefault, 0, true)
    },
    mousemove(item) {
      this.curItem = item
    },
    mouseleave() {
      this.curItem = {}
    },
    changeStatus(index, item) {
      this.curItem2 = item;

      if (this.scopesDefault[index] == true) {
        this.$set(this.scopesDefault, index, false)
      } else {
        this.$set(this.scopesDefault, index, this.scopes[index])
      }

    },
    scope() {
      this.list.forEach((item, index) => {
        this.scopesDefault[index] = false
        if ('children' in item) {
          this.scopes[index] = true
        } else {
          this.scopes[index] = false
        }
      })


    },
    start(e) {
      console.log(e)
    },
    end(e) {
      console.log(e)

    }
  }
}
</script>
<style lang='scss' scoped>
.danyuan {
  line-height: 37px;
  cursor: pointer;
  position: relative;
  color: #666;
  font-size: 12px;
}
.chosen {
  line-height: 37px;
  color: #23c132 !important;
  background-color: rgba(47, 191, 61, 0.3);
  width: 120px !important;
  padding-left: 15px;
  cursor: pointer !important;
  box-shadow: 0 0 9px 3px #cecccc !important;
}
.rig {
  position: absolute;
  font-size: 14px;
  font-weight: 700;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
.st1 {
  color: #23c132;
}
.st2 {
  color: #23c132 !important;
  background-color: rgba(47, 191, 61, 0.3);
}
</style>